<template>
  <div class="home-one clear animation-opacity" style="margin-bottom: 3rem">
    <RotationChart />
    <div class="home-one-head">
      <!-- 头条新闻 -->
      <TouTiao />
      <!-- nav  -->
      <div class="home-one-nav">
        <ul class="home-one-nav-list">
          <LoadingComponent
            v-slot="{ loadingFlag }"
            v-for="it in NavDates"
            :key="it.id"
          >
            <li>
              <RouterLink :to="it.href">
                <img :src="it.img" v-if="loadingFlag" />
                <p href="##">{{ it.title }}</p>
              </RouterLink>
            </li>
          </LoadingComponent>
        </ul>
      </div>
      <!-- 学生区域 -->
      <div class="home-one-student clear">
        <LoadingComponent
          v-for="it in StudentDates"
          :href="it.href"
          :key="it.id"
          v-slot="{ loadingFlag }"
        >
          <a>
            <div :class="'cztext ' + (it.id % 2 !== 0 ? 'div-cztext' : '')">
              <img :src="it.url" v-if="loadingFlag" />
            </div>
          </a>
        </LoadingComponent>
      </div>
      <!-- 推荐 -->
      <div class="tuijian">
        推荐高薪就业专业
        <span>只有选择好专业，才能成就好的未来</span>
      </div>
      <!-- 空乘专业 -->
      <LoadingComponent v-slot="{ loadingFlag }">
        <div class="zhuan1">
          <a
            href="https://p.qiao.baidu.com/cps/chat?siteId=17865090&userId=39789408&siteToken=1592882751da134d1450a7e08b16ffcb"
          >
            <img src="/img/空乘.30092573.png" v-if="loadingFlag" />
          </a>
        </div>
      </LoadingComponent>
      <p class="zhuan1-title">空乘专业</p>
      <!-- 空乘专业2 -->
      <LoadingComponent v-slot="{ loadingFlag }">
        <div class="zhuan2">
          <div>
            <a
              href="https://p.qiao.baidu.com/cps/chat?siteId=17865090&userId=39789408&siteToken=1592882751da134d1450a7e08b16ffcb"
            >
              <img src="/img/图片1.850cf37d.png" v-if="loadingFlag" />
              <p class="zhuan1-title">邮轮海乘</p>
            </a>
          </div>
          <div>
            <a
              href="https://p.qiao.baidu.com/cps/chat?siteId=17865090&userId=39789408&siteToken=1592882751da134d1450a7e08b16ffcb"
            >
              <img src="/img/图片2.f6bfdea2.png" v-if="loadingFlag" />
              <p class="zhuan1-title">高铁乘务</p>
            </a>
          </div>
        </div>
      </LoadingComponent>

      <!-- 空乘专业3 -->
      <LoadingComponent v-slot="{ loadingFlag }">
        <div class="zhuan2">
          <div>
            <a
              href="https://p.qiao.baidu.com/cps/chat?siteId=17865090&userId=39789408&siteToken=1592882751da134d1450a7e08b16ffcb"
            >
              <img src="/img/图片4.2951d8a1.png" v-if="loadingFlag" />
              <p class="zhuan1-title">地勤服务</p>
            </a>
          </div>
          <div>
            <a
              href="https://p.qiao.baidu.com/cps/chat?siteId=17865090&userId=39789408&siteToken=1592882751da134d1450a7e08b16ffcb"
            >
              <img src="/img/图片3.490f2e21.png" v-if="loadingFlag" />
              <p class="zhuan1-title">新媒体运营</p>
            </a>
          </div>
        </div>
      </LoadingComponent>
      <!-- 查看咨询专业详情 -->
      <div class="zhuanyechaxun">
        <a
          href="https://p.qiao.baidu.com/cps/chat?siteId=17865090&userId=39789408&siteToken=1592882751da134d1450a7e08b16ffcb"
          >查看咨询专业详情</a
        >
      </div>
    </div>
    <!-- 报名 -->
    <HotAdd />
    <!-- 企业定向 -->
    <div class="tuijian">
      有问题，找老师
      <span>一对一在线答疑</span>
    </div>
    <div class="home-one-head">
      <div class="yiwenti">
        <LoadingComponent
          class="yiwenti1"
          v-for="it in DouDates"
          :key="it.dou_id"
          v-slot="{ loadingFlag }"
        >
          <router-link :to="'/whom' + '?id=' + it.dou_id">
            <img
              :src="'http://www.shxw114.com:9527/' + it.dou_imgs"
              v-if="loadingFlag"
            />
          </router-link>
        </LoadingComponent>
      </div>
      <!-- 合作企业 -->
      <QiYeHeZuo />
    </div>
    <!-- 马上在线报名 -->
    <MsBm />
    <ImportantNotices />
    <InquiryHk />
    <!-- 尾部 -->
    <Footer />
  </div>
</template>
<script setup>
import axios from "axios";
import RotationChart from "../../components/RotationChart/index.vue";
import InquiryHk from "../inquiryHk/index.vue";
import HotAdd from "../../components/HotAdd/index.vue";
import ImportantNotices from "../../components/ImportantNotices/index.vue";
import Footer from "../../components/Footer/index.vue";
import TouTiao from "../../components/TouTiao/index.vue";
import MsBm from "../../components/MsBm/index.vue";
import QiYeHeZuo from "../../components/QiYeHeZuo/index.vue";
import { DouGet } from "../../server/index.js";
import { ref } from "vue";
const NavDates = ref({});
const StudentDates = ref({});
const DouDates = ref({});
(async function () {
  const { data } = await axios.post("/JSON/sy-data/index.json");
  NavDates.value = data;

  {
    const { data } = await axios.post("/JSON/sy-student/index.json");
    StudentDates.value = data;
  }
  {
    const { data } = await DouGet();
    DouDates.value = data;
  }
})();
// 获取 nav数据
</script>
<style scoped>
.home-one {
  width: 100%;
  height: auto;
}
.home-one-head {
  width: 14.5rem;
  height: auto;
  margin: 0.2rem auto 0;
}
.home-one-nav {
  width: 100%;
  height: 6.5rem;
  margin-top: 0.5rem;
}
.home-one-nav ul {
  display: flex;
  justify-content: space-between;
  align-content: center;
  flex-wrap: wrap;
}
.home-one-nav li {
  width: 2.5rem;
  height: 3rem;
  margin-bottom: 0.5rem;
}
.home-one-nav li a {
  display: block;
}
.home-one-nav li a img {
  width: 2rem;
  height: 2rem;
  display: block;
  margin: 0 auto;
}
.home-one-nav li a p {
  display: block;
  font-size: 0.5rem;
  text-align: center;
  line-height: 1rem;
  color: #666;
}
.home-one-student {
  width: 100%;
  padding-top: 1%;
  margin-top: 2%;
  background: #fff;
}
.home-one-student a {
  display: block;
  float: left;
}
.home-one-student a div {
  width: 7rem;
  height: 3.2rem;
  position: relative;
  margin-bottom: 0.05rem;
  text-align: center;
  margin-bottom: 0.2rem;
}
.home-one-student a div img {
  width: 100%;
  height: 100%;
}
.home-one-student a .div-cztext {
  margin-left: 0.3rem;
}
.tuijian {
  width: 100%;
  height: 3rem;
  display: block;
  text-align: center;
  padding-top: 3%;
  font-size: 1rem;
  color: #666;
}
.tuijian span {
  line-height: 0.3rem;
  font-size: 0.6rem;
  color: #f90;
  display: block;
  text-align: center;
  margin-top: 0.2rem;
}
.zhuan1 {
  width: 100%;
  height: 12em;
  margin-top: 0.4rem;
}
.zhuan1 img {
  width: 100%;
  height: 100%;
}
.zhuan2 {
  width: 100%;
  margin-top: 0.4rem;
  display: flex;
  justify-content: space-between;
}
.zhuan1-title {
  width: 100%;
  font-size: 0.6rem;
  line-height: 1rem;
  text-align: center;
  color: #666;
}
.zhuan2 div {
  width: 48%;
  height: auto;
}
.zhuan2 div img {
  width: 100%;
  height: 3rem;
}
.zhuanyechaxun {
  width: 100%;
  height: 2rem;
}
.zhuanyechaxun a {
  display: block;
  width: 11rem;
  height: 1.4rem;
  background-color: #fff;
  border: 0.001rem solid #f90;
  color: #f90;
  text-align: center;
  line-height: 1.4rem;
  margin: 0 auto;
  border-radius: 0.2rem;
  font-size: 0.4rem;
  margin-top: 0.2rem;
}
.yiwenti {
  width: 100%;
  height: auto;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}
.yiwenti1 {
  width: 7rem;
  height: 3.2rem;
  margin-bottom: 0.2rem;
}
.yiwenti1 img {
  width: 100%;
  height: 100%;
}
.registration {
  width: 100%;
  height: 20rem;
  background-image: url("/img/报名背景图.f9ed1c91.jpg");
  background-repeat: no-repeat;
  background-size: 100% 100%;
}
.main_formtop {
  padding-top: 3rem;
  margin-bottom: 0.5rem;
}
.main_formtop p {
  text-align: center;
  font-size: 0.4rem;
  color: #f90;
}
.form-get {
  display: block;
  width: 12rem;
  height: auto;
  margin: 0 auto;
}
.form-get1 {
  width: 100%;
  height: 1.4rem;
  display: flex;
  justify-content: space-between;
}
.form-get1 span {
  display: block;
  width: 3rem;
  font-size: 0.4rem;
  color: #fff;
  text-align: right;
  line-height: 1.2rem;
  margin-right: 0.6rem;
}
.form-get1 input {
  width: 9rem;
  height: 1rem;
  font-size: 0.4rem;
  outline: none;
  border-width: 0.001rem;
  padding-left: 0.4rem;
  box-sizing: border-box;
  background-color: transparent;
  color: #fff;
  border-color: #fff;
}
.form-get1 input::placeholder {
  color: #666;
}
.form-get button {
  display: block;
  width: 90%;
  height: 1.4rem;
  background-color: orange;
  color: #fff;
  text-align: center;
  line-height: 1.4rem;
  border-radius: 0.2rem;
  margin: 0 auto;
  outline: none;
  border: none;
  font-size: 0.4rem;
}
</style>